import {Component, OnInit, Inject} from '@angular/core';

@Component({
  selector: 'app-login',
  template: `
      <div>
      <form #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)">
      <div class="well">
      
        <fieldset ngModelGroup="login">
          <h4>User Login</h4>
          <div class="form-group">
              <label>Username</label>
              <input required minlength="3" class="form-control"  placeholder="Username" type="text" name="username" [(ngModel)]="username" #usernameref="ngModel" />
              <div *ngIf="usernameref.errors?.required">this is required</div>
              <div *ngIf="usernameref.errors?.minlength">should be at least 3 charactors</div>
          </div>
          
          <div class="form-group">
              <label>Username</label>
              <input required minlength="3" class="form-control"  placeholder="Username" type="password" name="password" [(ngModel)]="password" #passwordref="ngModel" />
              <div *ngIf="passwordref.errors?.required">this is required</div>
          </div>
        </fieldset>
      
        <button type="submit">Login</button>
      
      </div>
      </form>
    </div>
  `,
  styles: []
})
export class LoginComponent implements OnInit {

  username = '';
  password = '';

  constructor(@Inject('auth') private service) {
  }

  ngOnInit() {
  }

  onClick() {
    console.log('login status:' + this.service.userLogin(this.username, this.password));
  }

  onSubmit(formValue) {
    console.log('formValue :' + formValue);
  }

}
